<template>
  <div>
    <search btn-text="添加用户" @searchUser="search"></search>
    <table-info
      :headList="headList"
      :tableList="tableList"
      type="user"
      @deleteUserInfo="deleteUsersInfo"
      v-if="tableList.length > 0"
    >
    </table-info>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="total"
      @current-change="change"
    >
    </el-pagination>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'
import { deleteUserInfo } from '@/api'
export default {
  data () {
    return {
      isDialog: false,
      tableList: [], // 表格数据
      headList: [
        {
          id: 1,
          label: '用户Id',
          prop: 'user_id'
        },
        {
          id: 2,
          label: '用户名',
          prop: 'user_name'
        },
        {
          id: 3,
          label: '性别',
          prop: 'sex'
        },
        {
          id: 4,
          label: '手机',
          prop: 'phone'
        },
        {
          id: 5,
          label: '个性签名',
          prop: 'sign'
        }
      ]
    }
  },
  async created () {
    // 页码创建之时拿取数据
    await this.getCurrentPageUser({ currentPage: 1, pageSize: 8, input: '' })
    this.tableList = this.userInfo
  },
  computed: {
    ...mapState('user', {
      userInfo: (state) => state.userInfo, // 映射用户的数据
      total: (state) => state.total // 映射数据总数
    })
  },
  methods: {
    ...mapActions('user', ['getCurrentPageUser']),
    // 点击页码切换数据
    async change (page) {
      await this.getCurrentPageUser({
        currentPage: page,
        pageSize: 8,
        input: ''
      })
      this.tableList = this.userInfo
    },
    // 搜索
    async search (val) {
      await this.getCurrentPageUser({
        currentPage: 1,
        pageSize: 8,
        input: val
      })
      this.tableList = this.userInfo
    },
    // 删除用户数据
    async deleteUsersInfo (val) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      })
        .then(async () => {
          const res = await deleteUserInfo({ userId: val })
          console.log(res)
          await this.getCurrentPageUser({
            currentPage: 1,
            pageSize: 8,
            input: ''
          })
          this.tableList = this.userInfo
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  }
}
</script>

<style>
</style>
